Thumb

Registration Form With Image Upload In MVC | Using Jquery Ajax


4/7/2018 12:00:00 AM

Step 1 : Create Database Table.

CREATE TABLE tblProduct
(
	ProductId INT PRIMARY KEY IDENTITY(1,1),
	ProductName NVARCHAR(150) NOT NUll,
	Price MONEY NOT NUll,
	PicUrl NVARCHAR(MAX) NULL
)

Step 2 : Connect Your Database Using Entity Framework (As Like Above Video).

Step 3 : Add New Controller And New View

Step 4 : Write Below Code In Your View

@model IEnumerable<WorkWithImage.Models.Product>
@{
    ViewBag.Title = "Add New Product";
}

@* ########### Add New Product Form Design ############## *@

<div class="container">
    <h2 class="text-center">Add New Product</h2>
    <div class="row">
        <div class="col-md-6">
            <form id="AddProduct" method="post" enctype="multipart/form-data" onsubmit="return AjaxPost(this)">
                <label>Title</label><br />
                <input type="text" id="ProductName" name="ProductName" class="form-control" /><br />

                <label>Price</label><br />
                <input type="number" id="Price" name="Price" class="form-control" /><br />

                <label>Image</label><br />
                <input type="file" id="UploadImage" name="UploadImage" class="form-control" /><br />
                <button class="btn btn-danger">Add</button>
            </form>
        </div>
    </div>
</div><br /><br /><br /><br />
@* ########### Display All Product ############## *@
<div class="container">
    <h2>Product List</h2>
    @foreach (var item in Model)
    {
        double price = Convert.ToInt32(@item.Price);
        <div class="col-md-3" style="margin-bottom:25px">
            <div class="thumbnail">
                <div class="img-responsive" style="margin-bottom:20px">
                    <img src="~/AppFile/Images/@item.PicUrl" height="350" width="240" />
                </div>
                <div class="caption" style="border-top:3px solid #808080">
                    <h4><a href="#">@item.ProductName</a></h4>
                    <h3>@price.ToString("F2")$</h3>
                </div>
            </div>
        </div>
    }
</div>

    @* ########### 
        Pass Add New Product Form Data From View to Controller
        For Save It In Database
    ############## *@

<script>
    function AjaxPost(formData) {
        var ajaxConfig = {
            type: "POST",
            url: "/Product/SaveData",
            data: new FormData(formData),
            success: function (result) {
                alert(result);
                window.location.href = "/Product/AddNewProduct";
            }
        }
        if ($(formData).attr('enctype') == "multipart/form-data") {
            ajaxConfig["contentType"] = false;
            ajaxConfig["processData"] = false;
        }
        $.ajax(ajaxConfig);
        return false;
    }
</script>

Step 5 : Edit Product Class (As Like Above Video)

public partial class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public Nullable<decimal> Price { get; set; }
        public string PicUrl { get; set; }

        public HttpPostedFileBase UploadImage { get; set; }
    }

Step 6 :  Write Down The Below Code In Your Controller

public class ProductController : Controller
    {
        OnlineShopEntities db = new OnlineShopEntities();
        public ActionResult AddNewProduct()
        {
            return View(db.Products.ToList());
        }
        [HttpPost]
        public ActionResult SaveData(Product item)
        {
            
            if (item.ProductName != null && item.UploadImage != null)
            {
                string fileName = Path.GetFileNameWithoutExtension(item.UploadImage.FileName);
                string extension = Path.GetExtension(item.UploadImage.FileName);
                fileName = fileName + DateTime.Now.ToString("yymmssff") + extension;
                item.PicUrl = fileName;
                item.UploadImage.SaveAs(Path.Combine(Server.MapPath("~/AppFile/Images"),fileName));
                db.Products.Add(item);
                db.SaveChanges();
            }
            var result = "Successfully Added";
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }

Run This Project

About Teacher

Reza Karim

Software Engineer

More about him